<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="icon" href="favicon.ico">
    <title>Spring Boot Solr 集成</title>
    <style>
        form {
            width: 600px;
        }

        form div {
            background: #d1d2d3;
            padding: 3px;
            margin: 3px;
        }

        form div label {
            width: 80px;
            background: #d58161;;
            display: inline-block;
            margin-right: 3px;
            text-align: right;
        }
    </style>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<h1>SpringBoot Solr 集成 SolrClient Demo</h1>
<form id="data-form">
    <div><label>ID</label><input type="text" id="id" name="id"> 新增、修改、删除 注意ID条件</div>
    <div><label>产品名称</label><input type="text" id="productName" name="productName"></div>
    <div><label>产品价格</label><input type="text" id="productPrice" name="productPrice"></div>
    <div><label>产品规格</label><input type="text" id="productSpec" name="productSpec"></div>
</form>
<hr>
<button id="add">新增</button>
<button id="edit">修改</button>
<button id="del">删除</button>
<button id="queryAll">查询全部</button>
<button id="query">查询条件(其它条件参照后台)</button>

<div id="queryResult"></div>
<script>
    $(function () {
        $("#add").click(function () {
            add();
        });

        $("#edit").click(function () {
            edit();
        });

        $("#del").click(function () {
            del();
        });

        $("#queryAll").click(function () {
            queryAll();
        });

        $("#query").click(function () {
            query();
        });
    });

    var add = function () {
        var param = $("#data-form").serialize();
        console.log(param);
        $.post("/add", param, function (res) {
            alert(res);
        }, "html");
    };

    var edit = function () {
        var param = $("#data-form").serialize();
        $.post("/edit", param, function (res) {
            alert(res);
        }, "html");
    };

    var del = function () {
        $.post("/del", {id: $("#id").val()}, function (res) {
            alert(res);
        }, "html");
    };

    var queryAll = function () {
        $.post("/queryAll", {}, function (res) {
            $("#queryResult").html(JSON.stringify(res));
        }, "json");
    };

    var query = function () {
        var param = $("#data-form").serialize();
        $.post("/query", param, function (res) {
            $("#queryResult").html(JSON.stringify(res));
        }, "json");
    };

</script>
</body>
</html>